import React, { useState, CSSProperties } from 'react';
import { BarsOutlined } from '@ant-design/icons';
import classnames from 'classnames';
import { Transition } from 'react-transition-group';
//ts 不认识图片，只认识js jsx tsx
//let logo = require('../../../../assets/images/logo.png');
//如果是用require加载的话，返回值的default属性才是那个图片地址
//如果你非要用import如何解决? declare申明图片类型
import logo from '@/assets/images/logo.png';
import './index.less';
const duration = 1000;

const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out`,
    opacity: 0,
}

interface TransitionStyles {
    entering: CSSProperties; //进入时的样式
    entered: CSSProperties; //进入成功时的样式
    exiting: CSSProperties; //退出时的样式
    exited: CSSProperties; //退出成功时的样式
}

const transitionStyles: TransitionStyles = {
    entering: { opacity: 1 }, //不透明度为1
    entered: { opacity: 1 },
    exiting: { opacity: 0 }, //不透明度为0
    exited: { opacity: 0 },
}

interface Props {
    currentCategory: string; //当前选中的分类 此数据会放在redux仓库中
    setCurrentCategory: (currentCategory: string) => any; // 改变仓库中的分类
    refreshLessons: any;
}

function HomeHeader(props: Props) {
    let [isMenuVisible, setIsMenuVisible] = useState(false); //设定标识位表示菜单是否显示
    //设置当前分类,把当前选中的分类传递给redux仓库
    const setCurrentCategory = (event: React.MouseEvent<HTMLUListElement>) => {
        let target: HTMLUListElement = event.target as HTMLUListElement;
        let category: any = target.dataset.category; //获取用户选择的分类名称
        console.log(category, 'category');
        props.setCurrentCategory(category);//设置分类名称
        props.refreshLessons();
        setIsMenuVisible(false);//关闭分类选择层
    }

    return (
        <header className="home-header">
            <div className="logo-header">
                <img src={logo} alt="" />
                <BarsOutlined onClick={() => {
                    setIsMenuVisible(!isMenuVisible)
                }}></BarsOutlined>
            </div>
            <Transition in={isMenuVisible} timeout={duration}>
                {
                    (state: keyof TransitionStyles) => {
                        return (<ul
                            className="category"
                            onClick={setCurrentCategory}
                            style={
                                {
                                    ...defaultStyle,
                                    ...transitionStyles[state]
                                }
                            }
                        >
                            <li data-category="all" className={
                                classnames({
                                    active: props.currentCategory === 'all'
                                })
                            }>全部课程</li>
                            <li data-category="react" className={
                                classnames({
                                    active: props.currentCategory === 'react'
                                })
                            }>React课程</li>
                            <li data-category="vue" className={
                                classnames({
                                    active: props.currentCategory === 'vue'
                                })
                            }>Vue课程</li>
                        </ul>)
                    }
                }
            </Transition>


            {/* <Transition in={isMenuVisible} timeout={duration}>
                {
                    (state: keyof TransitionStyles) => (
                        <ul
                            className="category"
                            onClick={setCurrentCategory}
                            style={{
                                ...defaultStyle,
                                ...transitionStyles[state]
                            }}
                        >
                            <li data-category="all" className={classnames({ active: props.currentCategory === 'all' })}>全部课程</li>
                            <li data-category="react" className={classnames({ active: props.currentCategory === 'react' })}>React课程</li>
                            <li data-category="vue" className={classnames({ active: props.currentCategory === 'vue' })}>Vue课程</li>
                        </ul>
                    )
                }
            </Transition> */}
        </header>
    )
}

export default HomeHeader;
